﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="description" content="bootstrap default admin template">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Dropdowns | Prince Admin Template</title>


    <!-- Start global css -->
    <link rel="stylesheet" href="../../assets/global/plugins/Waves/dist/waves.min.css"/>
    <link rel="stylesheet" href="../../assets/global/plugins/bootstrap/dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="../../assets/icons_fonts/font-awesome/css/font-awesome.min.css"/>
    <!-- End global css -->

    <!-- Start page plugin css -->
    <link rel="stylesheet" href="../../assets/global/plugins/animate.css/animate.min.css"/>
    <!-- End page plugin css -->

    <!-- Start template global css -->
    <link rel="stylesheet" href="../../assets/global/css/components.min.css"/>
    <!-- End template global css -->

    <!-- Start layout css -->
    <link rel="stylesheet" href="../../assets/layouts/layouts_left_icon_menu/left_icon_menu_layout.min.css"/>
    <!-- End layout css -->

    <!-- Start favicon ico -->
    <link rel="icon" href="../../assets/favicon/prince.ico" type="image/x-icon"/>
    <link rel="icon" type="image/png" sizes="192x192" href="../../assets/favicon/prince-192x192.png">
    <link rel="apple-touch-icon" sizes="180x180" href="../../assets/favicon/prince-180x180.png">
    <!-- End favicon ico -->

</head>
<body class="nav-small">
<div class="container body">
    <div class="main_container">
            <!-- Start Loader -->
<div class="page-loader">
    <div class="preloader loading">
        <span class="slice"></span>
        <span class="slice"></span>
        <span class="slice"></span>
        <span class="slice"></span>
        <span class="slice"></span>
        <span class="slice"></span>
    </div>
</div>
<!-- End Loader -->

<!-- Start Scroll Top -->
<a href="javascript:" id="scroll" style="display: none;"><span></span></a>
<!-- End Scroll Top -->

<!-- start Left Menu-->
<div class="col-md-3 left_color">
    <div class="left_color scroll-view">
        <div class="navbar nav_title">
            <a href="index.html" class="medium-logo">
                <img src="../../assets/global/images/prince_logo.png" alt="medium-logo">
            </a>
            <a href="index.html" class="small-logo">
                <img src="../../assets/global/images/prince_logo2.png" alt="small-logo">
            </a>
        </div>

        <div class="clearfix"></div>

        <!-- sidebar menu -->
        <div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
            <div class="menu_section">
                <h3>General</h3>
                <ul class="nav side-menu">
                    <li><a class="waves-effect waves-light"><i class="fa fa-home"></i>Dashboard <span
                                    class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li> <a class="waves-effect waves-light" href="index.html">Dashboard</a></li>
                        </ul>
                    </li>
                    <li><a class="waves-effect waves-light"><i class="fa fa-desktop"></i>Basic UI Elements <span
                                    class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li> <a class="waves-effect waves-light" href="accordions.html">Accordions</a></li>
                            <li> <a class="waves-effect waves-light" href="buttons.html">Buttons</a></li>
                            <li> <a class="waves-effect waves-light" href="dropdowns.html">Dropdowns</a></li>
                            <li> <a class="waves-effect waves-light" href="modals.html">Modals</a></li>
                            <li> <a class="waves-effect waves-light" href="modals_animation.html">Modals Animation</a></li>
                            <li><a class="waves-effect waves-light" href="list.html">List</a></li>
                            <li> <a class="waves-effect waves-light" href="progressbar.html">Progress bar</a></li>
                            <li> <a class="waves-effect waves-light" href="tabs.html">Tabs</a></li>
                            <li> <a class="waves-effect waves-light" href="typography.html">Typography</a></li>
                            <li> <a class="waves-effect waves-light" href="tooltip_popover.html">Tooltips & Popover</a></li>
                        </ul>
                    </li>
                    <li><a class="waves-effect waves-light"><i class="fa fa-cube"></i>Advanced Elements <span
                                    class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li> <a class="waves-effect waves-light" href="alerts.html">Alerts</a></li>
                            <li> <a class="waves-effect waves-light" href="custom_scroll.html">Custom scroll</a></li>
                            <li> <a class="waves-effect waves-light" href="timeline.html">Timeline</a></li>
                            <li> <a class="waves-effect waves-light" href="carousel.html">Carousel</a></li>
                        </ul>
                    </li>
                    <li><a  class="waves-effect waves-light"><i class="fa fa-edit"></i> Forms <span class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li><a class="waves-effect waves-light" href="general_elements.html">General Elements</a></li>
                            <li><a class="waves-effect waves-light" href="form_input.html">Form Input</a></li>
                            <li><a class="waves-effect waves-light" href="form_validation.html">Form Validation</a></li>
                            <li><a class="waves-effect waves-light" href="form_mask.html">Form Mask</a></li>
                            <li><a class="waves-effect waves-light" href="form_layouts.html">Form Layouts</a></li>
                            <li><a class="waves-effect waves-light" href="form_wizard.html">Form Wizard</a></li>
                        </ul>
                    </li>
                    <li><a class="waves-effect waves-light"><i class="fa fa-window-maximize"></i>Popups <span
                                    class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li> <a class="waves-effect waves-light" href="sweetalerts.html">Popups</a></li>
                        </ul>
                    </li>
                    <li><a class="waves-effect waves-light"><i class="fa fa-table"></i> Tables <span class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li><a class="waves-effect waves-light" href="basic_table.html">Basic Table</a></li>
                            <li><a class="waves-effect waves-light" href="edit_table.html">Edit Table</a></li>
                            <li><a class="waves-effect waves-light" href="basic_datatable.html">Basic Datatable</a></li>
                            <li><a class="waves-effect waves-light" href="advanced_datatable.html">Advanced Datatable</a></li>
                            <li><a class="waves-effect waves-light" href="api_datatable.html">API Datatable</a></li>
                            <li><a class="waves-effect waves-light" href="styling_datatable.html">Styling Datatable</a></li>
                        </ul>
                    </li>
                    <li><a class="waves-effect waves-light"><i class="fa fa-bar-chart-o"></i> Charts <span
                                    class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li><a class="waves-effect waves-light" href="morris_chart.html">Morris Chart</a></li>
                            <li><a class="waves-effect waves-light" href="sparkline_chart.html">Sparkline Chart</a></li>
                            <li><a class="waves-effect waves-light" href="chartist_chart.html">Chartist</a></li>
                            <li><a class="waves-effect waves-light" href="chart_js.html">Chart.js</a></li>
                            <li><a class="waves-effect waves-light" href="easy_pie_chart.html">Easy Pie Chart</a></li>
                            <li><a class="waves-effect waves-light" href="rickshaw_chart.html">Rickshaw Chart</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="menu_section">
                <h3>Live On</h3>
                <ul class="nav side-menu">
                    <li><a class="waves-effect waves-light"><i class="fa fa-anchor"></i> Icons <span
                                    class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li><a class="waves-effect waves-light" href="font_awesome.html">Font awesome</a></li>
                            <li><a class="waves-effect waves-light" href="material_icon.html">Material icon</a></li>
                            <li><a class="waves-effect waves-light" href="themify_icon.html">Themify icon</a></li>
                            <li><a class="waves-effect waves-light" href="flag_icon.html">Flag icon</a></li>
                        </ul>
                    </li>
                    <li><a class="waves-effect waves-light"><i class="fa fa-map-marker"></i> Maps <span
                                    class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li><a class="waves-effect waves-light" href="map-google.html">Google Maps</a></li>
                            <li><a class="waves-effect waves-light" href="map-vector.html">Vector Map</a></li>
                        </ul>
                    </li>
                    <li><a class="waves-effect waves-light"><i class="fa fa-user-circle-o"></i> User Pages <span
                                    class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li><a class="waves-effect waves-light" href="user_login_v1.html">Login 1</a></li>
                            <li><a class="waves-effect waves-light" href="user_login_v2.html">Login 2</a></li>
                            <li><a class="waves-effect waves-light" href="user_register_v1.html">Register 1</a></li>
                            <li><a class="waves-effect waves-light" href="user_register_v2.html">Register 2</a></li>
                            <li><a class="waves-effect waves-light" href="user_forgot_password_v1.html">Forgot 1</a></li>
                            <li><a class="waves-effect waves-light" href="user_forgot_password_v2.html">Forgot 2</a></li>
                            <li><a class="waves-effect waves-light" href="user_lockscreen_v1.html">Lockscreen 1</a></li>
                            <li><a class="waves-effect waves-light" href="user_lockscreen_v2.html">Lockscreen 2</a></li>
                        </ul>
                    </li>
                    <li><a class="waves-effect waves-light"><i class="fa fa-exclamation-circle"></i> Error Pages <span
                                    class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li><a class="waves-effect waves-light" href="user_404.html">Error 404</a></li>
                            <li><a class="waves-effect waves-light" href="user_400.html">Error 400</a></li>
                            <li><a class="waves-effect waves-light" href="user_403.html">Error 403</a></li>
                            <li><a class="waves-effect waves-light" href="user_405.html">Error 405</a></li>
                            <li><a class="waves-effect waves-light" href="user_500.html">Error 500</a></li>
                            <li><a class="waves-effect waves-light" href="user_503.html">Error 503</a></li>
                        </ul>
                    </li>
                    <li><a class="waves-effect waves-light"><i class="fa fa-balance-scale"></i> General Pages <span
                                    class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li><a class="waves-effect waves-light" href="faq.html">FAQ</a></li>
                            <li><a class="waves-effect waves-light" href="userlist.html">User List</a></li>
                            <li><a class="waves-effect waves-light" href="invoice.html">Invoice</a></li>
                            <li><a class="waves-effect waves-light" href="blank.html">Blank</a></li>
                            <li><a class="waves-effect waves-light" href="profile.html">Profile</a></li>
                            <li><a class="waves-effect waves-light" href="gallery.html">Gallery</a></li>
                            <li><a class="waves-effect waves-light" href="maintenance.html">Maintenance</a></li>
                            <li><a class="waves-effect waves-light" href="draggable_grid.html">Draggable Grid</a></li>
                            <li><a class="waves-effect waves-light" href="grids.html">Grids</a></li>
                            <li><a class="waves-effect waves-light" href="search_results.html">Search result</a></li>
                        </ul>
                    </li>
                    <li><a class="waves-effect waves-light"><i class="fa fa-cogs"></i>Documentation <span
                                    class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li> <a class="waves-effect waves-light" href="documentation.html">Documentation</a></li>
                        </ul>
                    </li>
                </ul>
            </div>

        </div>
        <!-- /sidebar menu -->

    </div>
</div>
<!-- End Left Menu -->

<!-- start top navigation -->
<div class="top_nav">
    <div class="nav_menu">
        <nav>
            <div class="nav toggle">
                <a id="menu_toggle"><i class="fa fa-bars"></i></a>
                <div class="responsive-logo">
                    <a href="index.html">
                        <img src="../../assets/global/images/prince_logo.png" alt="main-logo">
                    </a>
                </div>
            </div>

            <div class="topbar-right">
                <div class="nav navbar-nav navbar-right">

                    <div class="header-search right-icon">
                        <form role="search" class="search-box">
                            <input placeholder="Search..." class="form-control" type="text">
                            <a href="javascript:">
                                <i class="fa fa-search"></i>
                            </a>
                        </form>
                    </div>

                    <div class="dropdown header-notification right-icon">
                        <a href="javascript:" class="dropdown-toggle waves-effect waves-light notification-icon"
                           data-toggle="dropdown" aria-expanded="false">
                            <i class="fa fa-bell-o" aria-hidden="true"></i>
                            <span class="label label-danger">4</span>
                        </a>
                        <ul class="dropdown-menu">
                            <li class="text-center">
                                <p class="notification-title">Notification<span
                                            class="label label-primary">4</span></p>
                            </li>
                            <li class="list-group default-scroll">
                                <a href="javascript:;" class="list-group-item">
                                    <div class="media">
                                        <div class="pull-left">
                                            <img src="../../assets/global/images/user1.jpg" alt="user">
                                        </div>
                                        <div class="media-body">
                                            <h5 class="media-heading"><span>Domance Den</span> posted a photo on
                                                your wall.</h5>
                                        </div>
                                    </div>
                                </a>
                                <a href="javascript:;" class="list-group-item">
                                    <div class="media">
                                        <div class="pull-left">
                                            <img src="../../assets/global/images/user2.jpg" alt="user">
                                        </div>
                                        <div class="media-body">
                                            <h5 class="media-heading"><span>Wikko Menta</span> commented on your
                                                last video.</h5>
                                        </div>
                                    </div>
                                </a>
                                <a href="javascript:;" class="list-group-item">
                                    <div class="media">
                                        <div class="pull-left">
                                            <img src="../../assets/global/images/user3.jpg" alt="user">
                                        </div>
                                        <div class="media-body">
                                            <h5 class="media-heading"><span>Jonny Sem</span> posted 4 comments
                                                on your photo.</h5>
                                        </div>
                                    </div>
                                </a>
                                <a href="javascript:;" class="list-group-item">
                                    <div class="media">
                                        <div class="pull-left">
                                            <img src="../../assets/global/images/user4.jpg" alt="user">
                                        </div>
                                        <div class="media-body">
                                            <h5 class="media-heading"><span>Doli Senga</span> posted a photo on
                                                your wall.</h5>
                                        </div>
                                    </div>
                                </a>
                                <a href="javascript:;" class="list-group-item">
                                    <div class="media">
                                        <div class="pull-left">
                                            <img src="../../assets/global/images/user5.jpg" alt="user">
                                        </div>
                                        <div class="media-body">
                                            <h5 class="media-heading"><span>Bhura Kenta</span> commented on your
                                                last video.</h5>
                                        </div>
                                    </div>
                                </a>
                                <a href="javascript:;" class="list-group-item">
                                    <div class="media">
                                        <div class="pull-left">
                                            <img src="../../assets/global/images/user6.jpg" alt="user">
                                        </div>
                                        <div class="media-body">
                                            <h5 class="media-heading"><span>Jolly Baby</span> posted 2 comments
                                                on your photo.</h5>
                                        </div>
                                    </div>
                                </a>

                            </li>
                            <li class="all-notification">
                                <a href="javascript:;" class="list-group-item text-right">
                                    <small>See all notifications</small>
                                </a>
                            </li>
                        </ul>
                    </div>

                    <div class="header-fullscreen right-icon">
                        <a href="javascript:" class="waves-effect waves-light toggle-fullscreen">
                            <i class="fa fa-arrows-alt" aria-hidden="true"></i>
                        </a>
                    </div>

                    <!--<div class="header-chat right-icon">
                        <a href="javascript:" class="waves-effect waves-light">
                            <i class="fa fa-comments-o" aria-hidden="true"></i>
                        </a>
                    </div>-->

                    <div class="dropdown user-profile right-icon">
                        <a href="javascript:" class="dropdown-toggle waves-effect waves-light"
                           data-toggle="dropdown"
                           aria-expanded="false">
                            <img src="../../assets/global/images/user10.jpg" alt="user">
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="javascript:" class="waves-effect waves-light">
                                    <i class="fa fa-user" aria-hidden="true"></i>Profile</a>
                            </li>
                            <li><a href="javascript:" class="waves-effect waves-light">
                                    <i class="fa fa-cog" aria-hidden="true"></i>Settings</a>
                            </li>
                            <li><a href="javascript:" class="waves-effect waves-light">
                                    <i class="fa fa-lock" aria-hidden="true"></i>Lock screen</a>
                            </li>
                            <li role="separator" class="divider"></li>
                            <li><a href="javascript:" class="waves-effect waves-light">
                                    <i class="fa fa-power-off text-danger" aria-hidden="true"></i> Logout</a>
                            </li>
                        </ul>
                    </div>

                </div>

            </div>
        </nav>
    </div>
</div>
<div class="clearfix"></div>
<!-- End top navigation -->
    <!-- Start Contain Section -->
    <div class="container-fluid right_color">
        <div class="page-main-header">
            <!-- Page Title -->
            <h2 class="page-name-title">Dropdowns</h2>
            <!--  Breadcrumb -->
            <ol class="breadcrumb">
                <li><a href="#">Home</a></li>
                <li class="text-info">Components</li>
                <li class="active">Dropdowns</li>
            </ol>
        </div>

        <div class="contain-section dropdown-page-section">
            <div class="contain-inner-section">
                <div class="row">
                    <div class="col-lg-6 col-md-12">
                        <div class="section-header">
                            <h2>Dropdowns color</h2>
                            <p>You can use simple different dropdowns color.</p>
                        </div>
                        <div class="section-body">
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">Primary</button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="primary-dropdown" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary" aria-labelledby="primary-dropdown"
                                    role="menu">
                                    <li><a href="javascript:void(0)" class="float-button-light">Action</a></li>
                                    <li><a href="javascript:void(0)" class="float-button-light">Another action</a>
                                    </li>
                                    <li><a href="javascript:void(0)" class="float-button-light">Something else
                                            here</a></li>
                                    <li></li>
                                    <li><a href="javascript:void(0)" class="float-button-light">Separated link</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-success float-button-light">Success</button>
                                <button type="button" class="btn btn-success dropdown-toggle float-button-light"
                                        id="success-dropdown" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-success" aria-labelledby="success-dropdown"
                                    role="menu">
                                    <li><a href="javascript:void(0)" class="float-button-light">Action</a></li>
                                    <li><a href="javascript:void(0)" class="float-button-light">Another action</a>
                                    </li>
                                    <li><a href="javascript:void(0)" class="float-button-light">Something else
                                            here</a></li>
                                    <li></li>
                                    <li><a href="javascript:void(0)" class="float-button-light">Separated link</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-info float-button-light">Info</button>
                                <button type="button" class="btn btn-info dropdown-toggle float-button-light"
                                        id="info-dropdown" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-info" aria-labelledby="info-dropdown"
                                    role="menu">
                                    <li><a href="javascript:void(0)" class="float-button-light">Action</a></li>
                                    <li><a href="javascript:void(0)" class="float-button-light">Another action</a>
                                    </li>
                                    <li><a href="javascript:void(0)" class="float-button-light">Something else
                                            here</a></li>
                                    <li></li>
                                    <li><a href="javascript:void(0)" class="float-button-light">Separated link</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-warning float-button-light">Warning</button>
                                <button type="button" class="btn btn-warning dropdown-toggle float-button-light"
                                        id="warning-dropdown" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-warning" aria-labelledby="warning-dropdown"
                                    role="menu">
                                    <li><a href="javascript:void(0)" class="float-button-light">Action</a></li>
                                    <li><a href="javascript:void(0)" class="float-button-light">Another action</a>
                                    </li>
                                    <li><a href="javascript:void(0)" class="float-button-light">Something else
                                            here</a></li>
                                    <li></li>
                                    <li><a href="javascript:void(0)" class="float-button-light">Separated link</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-danger float-button-light">Danger</button>
                                <button type="button" class="btn btn-danger dropdown-toggle float-button-light"
                                        id="danger-dropdown" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-danger" aria-labelledby="danger-dropdown"
                                    role="menu">
                                    <li><a href="javascript:void(0)" class="float-button-light">Action</a></li>
                                    <li><a href="javascript:void(0)" class="float-button-light">Another action</a>
                                    </li>
                                    <li><a href="javascript:void(0)" class="float-button-light">Something else
                                            here</a></li>
                                    <li></li>
                                    <li><a href="javascript:void(0)" class="float-button-light">Separated link</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-purple float-button-light">Purple</button>
                                <button type="button" class="btn btn-purple dropdown-toggle float-button-light"
                                        id="purple-dropdown" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-purple" aria-labelledby="purple-dropdown"
                                    role="menu">
                                    <li><a href="javascript:void(0)" class="float-button-light">Action</a></li>
                                    <li><a href="javascript:void(0)" class="float-button-light">Another action</a>
                                    </li>
                                    <li><a href="javascript:void(0)" class="float-button-light">Something else
                                            here</a></li>
                                    <li></li>
                                    <li><a href="javascript:void(0)" class="float-button-light">Separated link</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-pink float-button-light">Pink</button>
                                <button type="button" class="btn btn-pink dropdown-toggle float-button-light"
                                        id="pink-dropdown" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-pink" aria-labelledby="pink-dropdown"
                                    role="menu">
                                    <li><a href="javascript:void(0)" class="float-button-light">Action</a></li>
                                    <li><a href="javascript:void(0)" class="float-button-light">Another action</a>
                                    </li>
                                    <li><a href="javascript:void(0)" class="float-button-light">Something else
                                            here</a></li>
                                    <li></li>
                                    <li><a href="javascript:void(0)" class="float-button-light">Separated link</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-inverse float-button-light">Inverse</button>
                                <button type="button" class="btn btn-inverse dropdown-toggle float-button-light"
                                        id="inverse-dropdown" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-inverse" aria-labelledby="inverse-dropdown"
                                    role="menu">
                                    <li><a href="javascript:void(0)" class="float-button-light">Action</a></li>
                                    <li><a href="javascript:void(0)" class="float-button-light">Another action</a>
                                    </li>
                                    <li><a href="javascript:void(0)" class="float-button-light">Something else
                                            here</a></li>
                                    <li></li>
                                    <li><a href="javascript:void(0)" class="float-button-light">Separated link</a>
                                    </li>
                                </ul>
                            </div>

                        </div>
                    </div>

                    <div class="col-lg-6 col-md-12">
                        <div class="section-header">
                            <h2>Dropdowns color with outline</h2>
                            <p>You can use simple different dropdowns color with outline.</p>
                        </div>
                        <div class="section-body">
                            <div class="btn-group">
                                <button type="button"
                                        class="btn btn-default btn-outline dropdown-toggle float-button-light"
                                        id="default-dropdown-outline" data-toggle="dropdown" aria-expanded="false">
                                    Default
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu" aria-labelledby="default-dropdown-outline"
                                    role="menu">
                                    <li><a href="javascript:void(0)" class="float-button-light">Action</a></li>
                                    <li><a href="javascript:void(0)" class="float-button-light">Another action</a>
                                    </li>
                                    <li><a href="javascript:void(0)" class="float-button-light">Something else
                                            here</a></li>
                                    <li></li>
                                    <li><a href="javascript:void(0)" class="float-button-light">Separated link</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button"
                                        class="btn btn-primary btn-outline dropdown-toggle float-button-light"
                                        id="primary-dropdown-outline" data-toggle="dropdown" aria-expanded="false">
                                    Primary
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary"
                                    aria-labelledby="primary-dropdown-outline"
                                    role="menu">
                                    <li><a href="javascript:void(0)" class="float-button-light">Action</a></li>
                                    <li><a href="javascript:void(0)" class="float-button-light">Another action</a>
                                    </li>
                                    <li><a href="javascript:void(0)" class="float-button-light">Something else
                                            here</a></li>
                                    <li></li>
                                    <li><a href="javascript:void(0)" class="float-button-light">Separated link</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button"
                                        class="btn btn-success btn-outline dropdown-toggle float-button-light"
                                        id="success-dropdown-outline" data-toggle="dropdown" aria-expanded="false">
                                    Success
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-success"
                                    aria-labelledby="success-dropdown-outline"
                                    role="menu">
                                    <li><a href="javascript:void(0)" class="float-button-light">Action</a></li>
                                    <li><a href="javascript:void(0)" class="float-button-light">Another action</a>
                                    </li>
                                    <li><a href="javascript:void(0)" class="float-button-light">Something else
                                            here</a></li>
                                    <li></li>
                                    <li><a href="javascript:void(0)" class="float-button-light">Separated link</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button"
                                        class="btn btn-info btn-outline dropdown-toggle float-button-light"
                                        id="info-dropdown-outline" data-toggle="dropdown" aria-expanded="false">Info
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-info" aria-labelledby="info-dropdown-outline"
                                    role="menu">
                                    <li><a href="javascript:void(0)" class="float-button-light">Action</a></li>
                                    <li><a href="javascript:void(0)" class="float-button-light">Another action</a>
                                    </li>
                                    <li><a href="javascript:void(0)" class="float-button-light">Something else
                                            here</a></li>
                                    <li></li>
                                    <li><a href="javascript:void(0)" class="float-button-light">Separated link</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button"
                                        class="btn btn-warning btn-outline dropdown-toggle float-button-light"
                                        id="warning-dropdown-outline" data-toggle="dropdown" aria-expanded="false">
                                    Warning
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-warning"
                                    aria-labelledby="warning-dropdown-outline"
                                    role="menu">
                                    <li><a href="javascript:void(0)" class="float-button-light">Action</a></li>
                                    <li><a href="javascript:void(0)" class="float-button-light">Another action</a>
                                    </li>
                                    <li><a href="javascript:void(0)" class="float-button-light">Something else
                                            here</a></li>
                                    <li></li>
                                    <li><a href="javascript:void(0)" class="float-button-light">Separated link</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button"
                                        class="btn btn-danger btn-outline dropdown-toggle float-button-light"
                                        id="danger-dropdown-outline" data-toggle="dropdown" aria-expanded="false">Danger
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-danger" aria-labelledby="danger-dropdown-outline"
                                    role="menu">
                                    <li><a href="javascript:void(0)" class="float-button-light">Action</a></li>
                                    <li><a href="javascript:void(0)" class="float-button-light">Another action</a>
                                    </li>
                                    <li><a href="javascript:void(0)" class="float-button-light">Something else
                                            here</a></li>
                                    <li></li>
                                    <li><a href="javascript:void(0)" class="float-button-light">Separated link</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button"
                                        class="btn btn-purple btn-outline dropdown-toggle float-button-light"
                                        id="purple-dropdown-outline" data-toggle="dropdown" aria-expanded="false">Purple
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-purple" aria-labelledby="purple-dropdown-outline"
                                    role="menu">
                                    <li><a href="javascript:void(0)" class="float-button-light">Action</a></li>
                                    <li><a href="javascript:void(0)" class="float-button-light">Another action</a>
                                    </li>
                                    <li><a href="javascript:void(0)" class="float-button-light">Something else
                                            here</a></li>
                                    <li></li>
                                    <li><a href="javascript:void(0)" class="float-button-light">Separated link</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button"
                                        class="btn btn-pink btn-outline dropdown-toggle float-button-light"
                                        id="pink-dropdown-outline" data-toggle="dropdown" aria-expanded="false">Pink
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-pink" aria-labelledby="pink-dropdown-outline"
                                    role="menu">
                                    <li><a href="javascript:void(0)" class="float-button-light">Action</a></li>
                                    <li><a href="javascript:void(0)" class="float-button-light">Another action</a>
                                    </li>
                                    <li><a href="javascript:void(0)" class="float-button-light">Something else
                                            here</a></li>
                                    <li></li>
                                    <li><a href="javascript:void(0)" class="float-button-light">Separated link</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button"
                                        class="btn btn-inverse btn-outline dropdown-toggle float-button-light"
                                        id="inverse-dropdown-outline" data-toggle="dropdown" aria-expanded="false">
                                    Inverse
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-inverse"
                                    aria-labelledby="inverse-dropdown-outline"
                                    role="menu">
                                    <li><a href="javascript:void(0)" class="float-button-light">Action</a></li>
                                    <li><a href="javascript:void(0)" class="float-button-light">Another action</a></li>
                                    <li><a href="javascript:void(0)" class="float-button-light">Something else here</a>
                                    </li>
                                    <li></li>
                                    <li><a href="javascript:void(0)" class="float-button-light">Separated link</a></li>
                                </ul>
                            </div>

                        </div>
                    </div>
                    <div class="clearfix"></div>

                    <div class="col-lg-6 col-md-12">
                        <div class="section-header">
                            <h2>Dropdown size</h2>
                            <p>You can use different four dropdown sizes.</p>
                        </div>
                        <div class="section-body">
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary btn-lg float-button-light">Large</button>
                                <button type="button" class="btn btn-primary btn-lg dropdown-toggle float-button-light"
                                        id="large-dropdown" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-default" aria-labelledby="large-dropdown"
                                    role="menu">
                                    <li><a href="javascript:void(0)" class=" float-button-light">Action</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Another action</a>
                                    </li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Something else
                                            here</a></li>
                                    <li></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Separated link</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">Medium</button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="medium-dropdown" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-default" aria-labelledby="medium-dropdown"
                                    role="menu">
                                    <li><a href="javascript:void(0)" class=" float-button-light">Action</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Another action</a>
                                    </li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Something else
                                            here</a></li>
                                    <li></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Separated link</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary btn-sm float-button-light">Small</button>
                                <button type="button" class="btn btn-primary btn-sm dropdown-toggle float-button-light"
                                        id="small-dropdown" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-default" aria-labelledby="small-dropdown"
                                    role="menu">
                                    <li><a href="javascript:void(0)" class=" float-button-light">Action</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Another action</a>
                                    </li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Something else
                                            here</a></li>
                                    <li></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Separated link</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary btn-xs float-button-light">Xsmall</button>
                                <button type="button" class="btn btn-primary btn-xs dropdown-toggle float-button-light"
                                        id="xsmall-dropdown" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-default" aria-labelledby="xsmall-dropdown"
                                    role="menu">
                                    <li><a href="javascript:void(0)" class=" float-button-light">Action</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Another action</a>
                                    </li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Something else
                                            here</a></li>
                                    <li></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Separated link</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>


                    <div class="col-lg-6 col-md-12">
                        <div class="section-header">
                            <h2>Dropdown position</h2>
                            <p>You can use different four dropdown position.</p>
                        </div>
                        <div class="section-body">
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">Default</button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="default-dropdown-position" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary"
                                    aria-labelledby="default-dropdown-position"
                                    role="menu">
                                    <li><a href="javascript:void(0)" class=" float-button-light">Action</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Another action</a>
                                    </li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Something else
                                            here</a></li>
                                    <li></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Separated link</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">Right</button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="right-dropdown-position" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-right dropdown-menu-primary"
                                    aria-labelledby="right-dropdown-position"
                                    role="menu">
                                    <li><a href="javascript:void(0)" class=" float-button-light">Action</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Another action</a>
                                    </li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Something else
                                            here</a></li>
                                    <li></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Separated link</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="btn-group dropup">
                                <button type="button" class="btn btn-primary float-button-light">Up left</button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="upleft-dropdown-position" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary"
                                    aria-labelledby="upleft-dropdown-position"
                                    role="menu">
                                    <li><a href="javascript:void(0)" class=" float-button-light">Action</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Another action</a>
                                    </li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Something else
                                            here</a></li>
                                    <li></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Separated link</a>
                                    </li>
                                </ul>
                            </div>

                            <div class="btn-group dropup">
                                <button type="button" class="btn btn-primary float-button-light">Up right</button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="upright-dropdown-position" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-right dropdown-menu-primary"
                                    aria-labelledby="upright-dropdown-position"
                                    role="menu">
                                    <li><a href="javascript:void(0)" class=" float-button-light">Action</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Another action</a>
                                    </li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Something else
                                            here</a></li>
                                    <li></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Separated link</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="clearfix"></div>

                    <div class="col-lg-6 col-md-12">
                        <div class="section-header">
                            <h2>Attention seekers menu effects</h2>
                            <p>Attention seekers different animations can be applied on menu open effects.</p>
                        </div>
                        <div class="section-body">
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">Bounce</button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="bounce-menus" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary bounce animated"
                                    aria-labelledby="bounce-menus" role="menu">
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 1</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 2</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 3</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 4</a></li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">Flash</button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="flash-menus" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary flash animated"
                                    aria-labelledby="flash-menus" role="menu">
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 1</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 2</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 3</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 4</a></li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">Pulse</button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="pulse-menus" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary pulse animated"
                                    aria-labelledby="pulse-menus" role="menu">
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 1</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 2</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 3</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 4</a></li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">RubberBand</button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="rubberBand-menus" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary rubberBand animated"
                                    aria-labelledby="rubberBand-menus" role="menu">
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 1</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 2</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 3</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 4</a></li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">Shake</button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="shake-menus" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary shake animated"
                                    aria-labelledby="shake-menus" role="menu">
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 1</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 2</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 3</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 4</a></li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">Swing</button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="swing-menus" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary swing animated"
                                    aria-labelledby="swing-menus" role="menu">
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 1</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 2</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 3</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 4</a></li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">Tada</button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="tada-menus" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary tada animated"
                                    aria-labelledby="tada-menus" role="menu">
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 1</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 2</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 3</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 4</a></li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">Wobble</button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="wobble-menus" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary wobble animated"
                                    aria-labelledby="wobble-menus" role="menu">
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 1</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 2</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 3</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 4</a></li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">Jello</button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="jello-menus" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary jello animated"
                                    aria-labelledby="jello-menus" role="menu">
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 1</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 2</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 3</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 4</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-6 col-md-12">
                        <div class="section-header">
                            <h2>Flippers menu effects</h2>
                            <p>Flippers different animations can be applied on menu open effects.</p>
                        </div>
                        <div class="section-body">
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">Flip</button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="flip-menus" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary flip animated"
                                    aria-labelledby="flip-menus" role="menu">
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 1</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 2</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 3</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 4</a></li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">FlipInX</button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="flipInX-menus" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary flipInX animated"
                                    aria-labelledby="flipInX-menus" role="menu">
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 1</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 2</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 3</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 4</a></li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">FlipInY</button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="flipInY-menus" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary flipInY animated"
                                    aria-labelledby="flipInY-menus" role="menu">
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 1</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 2</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 3</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 4</a></li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">LightSpeedIn
                                </button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="lightSpeedIn-menus" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary lightSpeedIn animated"
                                    aria-labelledby="lightSpeedIn-menus" role="menu">
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 1</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 2</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 3</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 4</a></li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">rollIn</button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="rollIn-menus" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary rollIn animated"
                                    aria-labelledby="rollIn-menus" role="menu">
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 1</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 2</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 3</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 4</a></li>
                                </ul>
                            </div>

                        </div>
                    </div>

                    <div class="clearfix"></div>

                    <div class="col-lg-6 col-md-12">
                        <div class="section-header">
                            <h2>Bouncing entrances menu effects</h2>
                            <p>Bouncing entrances different animations can be applied on menu open effects.</p>
                        </div>
                        <div class="section-body">
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">BounceIn</button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="bouncein-menus" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary bounceIn animated"
                                    aria-labelledby="bouncein-menus" role="menu">
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 1</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 2</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 3</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 4</a></li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">BounceInDown
                                </button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="bounceInDown-menus" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary bounceInDown animated"
                                    aria-labelledby="bounceInDown-menus" role="menu">
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 1</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 2</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 3</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 4</a></li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">BounceInLeft
                                </button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="bounceInLeft-menus" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary bounceInLeft animated"
                                    aria-labelledby="bounceInLeft-menus" role="menu">
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 1</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 2</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 3</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 4</a></li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">BounceInRight
                                </button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="bounceInRight-menus" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary bounceInRight animated"
                                    aria-labelledby="bounceInRight-menus" role="menu">
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 1</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 2</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 3</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 4</a></li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">BounceInUp</button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="bounceInUp-menus" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary bounceInUp animated"
                                    aria-labelledby="bounceInUp-menus" role="menu">
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 1</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 2</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 3</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 4</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-12">
                        <div class="section-header">
                            <h2>Fading entrances menu effects</h2>
                            <p>Fading entrances different animations can be applied on menu open effects.</p>
                        </div>
                        <div class="section-body">
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">FadeIn</button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="fadeIn-menus" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary fadeIn animated"
                                    aria-labelledby="fadeIn-menus" role="menu">
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 1</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 2</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 3</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 4</a></li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">FadeInDown</button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="fadeInDown-menus" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary fadeInDown animated"
                                    aria-labelledby="fadeInDown-menus" role="menu">
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 1</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 2</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 3</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 4</a></li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">FadeInDownBig
                                </button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="fadeInDownBig-menus" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary fadeInDownBig animated"
                                    aria-labelledby="fadeInDownBig-menus" role="menu">
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 1</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 2</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 3</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 4</a></li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">FadeInLeft</button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="fadeInLeft-menus" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary fadeInLeft animated"
                                    aria-labelledby="fadeInLeft-menus" role="menu">
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 1</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 2</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 3</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 4</a></li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">FadeInLeftBig
                                </button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="fadeInLeftBig-menus" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary fadeInLeftBig animated"
                                    aria-labelledby="fadeInLeftBig-menus" role="menu">
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 1</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 2</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 3</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 4</a></li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">FadeInRight
                                </button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="fadeInRight-menus" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary fadeInRight animated"
                                    aria-labelledby="fadeInRight-menus" role="menu">
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 1</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 2</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 3</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 4</a></li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">FadeInRightBig
                                </button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="fadeInRightBig-menus" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary fadeInRightBig animated"
                                    aria-labelledby="fadeInRightBig-menus" role="menu">
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 1</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 2</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 3</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 4</a></li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">FadeInUp</button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="fadeInUp-menus" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary fadeInUp animated"
                                    aria-labelledby="fadeInUp-menus" role="menu">
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 1</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 2</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 3</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 4</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="clearfix"></div>

                    <div class="col-lg-6 col-md-12">
                        <div class="section-header">
                            <h2>Rotating entrances menu effects</h2>
                            <p>Rotating entrances different animations can be applied on menu open effects.</p>
                        </div>
                        <div class="section-body">
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">RotateIn</button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="rotateIn-menus" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary rotateIn animated"
                                    aria-labelledby="rotateIn-menus" role="menu">
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 1</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 2</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 3</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 4</a></li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">RotateInDownLeft
                                </button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="rotateInDownLeft-menus" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary rotateInDownLeft animated"
                                    aria-labelledby="rotateInDownLeft-menus" role="menu">
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 1</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 2</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 3</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 4</a></li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">RotateInDownRight
                                </button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="rotateInDownRight-menus" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary rotateInDownRight animated"
                                    aria-labelledby="rotateInDownRight-menus" role="menu">
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 1</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 2</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 3</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 4</a></li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">RotateInUpLeft
                                </button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="rotateInUpLeft-menus" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary rotateInUpLeft animated"
                                    aria-labelledby="rotateInUpLeft-menus" role="menu">
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 1</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 2</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 3</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 4</a></li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">RotateInUpRight
                                </button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="rotateInUpRight-menus" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary rotateInUpRight animated"
                                    aria-labelledby="rotateInUpRight-menus" role="menu">
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 1</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 2</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 3</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 4</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-12">
                        <div class="section-header">
                            <h2>Sliding entrances menu effects</h2>
                            <p>Sliding entrances different animations can be applied on menu open effects.</p>
                        </div>
                        <div class="section-body">
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">SlideInUp</button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="slideInUp-menus" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary slideInUp animated"
                                    aria-labelledby="slideInUp-menus" role="menu">
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 1</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 2</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 3</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 4</a></li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">SlideInDown
                                </button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="slideInDown-menus" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary slideInDown animated"
                                    aria-labelledby="slideInDown-menus" role="menu">
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 1</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 2</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 3</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 4</a></li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">SlideInLeft
                                </button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="slideInLeft-menus" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary slideInLeft animated"
                                    aria-labelledby="slideInLeft-menus" role="menu">
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 1</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 2</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 3</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 4</a></li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">SlideInRight
                                </button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="slideInRight-menus" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary slideInRight animated"
                                    aria-labelledby="slideInRight-menus" role="menu">
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 1</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 2</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 3</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 4</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="clearfix"></div>

                    <div class="col-lg-6 col-md-12">
                        <div class="section-header">
                            <h2>Zoom entrances menu effects</h2>
                            <p>Zoom entrances different animations can be applied on menu open effects.</p>
                        </div>
                        <div class="section-body">
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">ZoomIn</button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="zoomIn-menus" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary zoomIn animated"
                                    aria-labelledby="zoomIn-menus" role="menu">
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 1</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 2</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 3</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 4</a></li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">ZoomInDown</button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="zoomInDown-menus" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary zoomInDown animated"
                                    aria-labelledby="zoomInDown-menus" role="menu">
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 1</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 2</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 3</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 4</a></li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">ZoomInLeft</button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="zoomInLeft-menus" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary zoomInLeft animated"
                                    aria-labelledby="zoomInLeft-menus" role="menu">
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 1</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 2</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 3</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 4</a></li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">ZoomInRight
                                </button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="zoomInRight-menus" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary zoomInRight animated"
                                    aria-labelledby="zoomInRight-menus" role="menu">
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 1</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 2</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 3</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 4</a></li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">ZoomInUp</button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="zoomInUp-menus" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary zoomInUp animated"
                                    aria-labelledby="zoomInUp-menus" role="menu">
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 1</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 2</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 3</a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Select 4</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-12">
                        <div class="section-header">
                            <h2>Attention seekers menu item effects</h2>
                            <p>Attention seekers different animations can be applied on menu item open effects.</p>
                        </div>
                        <div class="section-body">
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">Bounce</button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="bounce-items" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary effect-delay"
                                    aria-labelledby="bounce-items" role="menu">
                                    <li class="bounce animated"><a href="javascript:void(0)"
                                                                   class="float-button-light">Select 1</a></li>
                                    <li class="bounce animated"><a href="javascript:void(0)"
                                                                   class="float-button-light">Select 2</a></li>
                                    <li class="bounce animated"><a href="javascript:void(0)"
                                                                   class="float-button-light">Select 3</a></li>
                                    <li class="bounce animated"><a href="javascript:void(0)"
                                                                   class="float-button-light">Select 4</a></li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">Flash</button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="flash-items" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary effect-delay"
                                    aria-labelledby="flash-items" role="menu">
                                    <li class="flash animated"><a href="javascript:void(0)"
                                                                  class=" float-button-light">Select 1</a></li>
                                    <li class="flash animated"><a href="javascript:void(0)"
                                                                  class=" float-button-light">Select 2</a></li>
                                    <li class="flash animated"><a href="javascript:void(0)"
                                                                  class=" float-button-light">Select 3</a></li>
                                    <li class="flash animated"><a href="javascript:void(0)"
                                                                  class=" float-button-light">Select 4</a></li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">Pulse</button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="pulse-items" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary effect-delay"
                                    aria-labelledby="pulse-items" role="menu">
                                    <li class="pulse animated"><a href="javascript:void(0)"
                                                                  class=" float-button-light">Select 1</a></li>
                                    <li class="pulse animated"><a href="javascript:void(0)"
                                                                  class=" float-button-light">Select 2</a></li>
                                    <li class="pulse animated"><a href="javascript:void(0)"
                                                                  class=" float-button-light">Select 3</a></li>
                                    <li class="pulse animated"><a href="javascript:void(0)"
                                                                  class=" float-button-light">Select 4</a></li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">RubberBand</button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="rubberBand-items" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary effect-delay"
                                    aria-labelledby="rubberBand-items" role="menu">
                                    <li class="rubberBand animated"><a href="javascript:void(0)"
                                                                       class=" float-button-light">Select 1</a></li>
                                    <li class="rubberBand animated"><a href="javascript:void(0)"
                                                                       class=" float-button-light">Select 2</a></li>
                                    <li class="rubberBand animated"><a href="javascript:void(0)"
                                                                       class=" float-button-light">Select 3</a></li>
                                    <li class="rubberBand animated"><a href="javascript:void(0)"
                                                                       class=" float-button-light">Select 4</a></li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">Shake</button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="shake-items" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary effect-delay"
                                    aria-labelledby="shake-items" role="menu">
                                    <li class="shake animated"><a href="javascript:void(0)"
                                                                  class=" float-button-light">Select 1</a></li>
                                    <li class="shake animated"><a href="javascript:void(0)"
                                                                  class=" float-button-light">Select 2</a></li>
                                    <li class="shake animated"><a href="javascript:void(0)"
                                                                  class=" float-button-light">Select 3</a></li>
                                    <li class="shake animated"><a href="javascript:void(0)"
                                                                  class=" float-button-light">Select 4</a></li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">Swing</button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="swing-items" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary effect-delay"
                                    aria-labelledby="swing-items" role="menu">
                                    <li class="swing animated"><a href="javascript:void(0)"
                                                                  class=" float-button-light">Select 1</a></li>
                                    <li class="swing animated"><a href="javascript:void(0)"
                                                                  class=" float-button-light">Select 2</a></li>
                                    <li class="swing animated"><a href="javascript:void(0)"
                                                                  class=" float-button-light">Select 3</a></li>
                                    <li class="swing animated"><a href="javascript:void(0)"
                                                                  class=" float-button-light">Select 4</a></li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">Tada</button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="tada-items" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary effect-delay"
                                    aria-labelledby="tada-items" role="menu">
                                    <li class="tada animated"><a href="javascript:void(0)"
                                                                 class=" float-button-light">Select 1</a></li>
                                    <li class="tada animated"><a href="javascript:void(0)"
                                                                 class=" float-button-light">Select 2</a></li>
                                    <li class="tada animated"><a href="javascript:void(0)"
                                                                 class=" float-button-light">Select 3</a></li>
                                    <li class="tada animated"><a href="javascript:void(0)"
                                                                 class=" float-button-light">Select 4</a></li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">Wobble</button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="wobble-items" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary effect-delay"
                                    aria-labelledby="wobble-items" role="menu">
                                    <li class="wobble animated"><a href="javascript:void(0)"
                                                                   class=" float-button-light">Select 1</a></li>
                                    <li class="wobble animated"><a href="javascript:void(0)"
                                                                   class=" float-button-light">Select 2</a></li>
                                    <li class="wobble animated"><a href="javascript:void(0)"
                                                                   class=" float-button-light">Select 3</a></li>
                                    <li class="wobble animated"><a href="javascript:void(0)"
                                                                   class=" float-button-light">Select 4</a></li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">Jello</button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="jello-items" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary effect-delay"
                                    aria-labelledby="jello-items" role="menu">
                                    <li class="jello animated"><a href="javascript:void(0)"
                                                                  class=" float-button-light">Select 1</a></li>
                                    <li class="jello animated"><a href="javascript:void(0)"
                                                                  class=" float-button-light">Select 2</a></li>
                                    <li class="jello animated"><a href="javascript:void(0)"
                                                                  class=" float-button-light">Select 3</a></li>
                                    <li class="jello animated"><a href="javascript:void(0)"
                                                                  class=" float-button-light">Select 4</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="clearfix"></div>

                    <div class="col-lg-6 col-md-12">
                        <div class="section-header">
                            <h2>Flippers menu item effects</h2>
                            <p>Flippers different animations can be applied on menu item open effects.</p>
                        </div>
                        <div class="section-body">
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">Flip</button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="flip-items" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary effect-delay"
                                    aria-labelledby="flip-items" role="menu">
                                    <li class="flip animated"><a href="javascript:void(0)"
                                                                 class=" float-button-light">Select 1</a></li>
                                    <li class="flip animated"><a href="javascript:void(0)"
                                                                 class=" float-button-light">Select 2</a></li>
                                    <li class="flip animated"><a href="javascript:void(0)"
                                                                 class=" float-button-light">Select 3</a></li>
                                    <li class="flip animated"><a href="javascript:void(0)"
                                                                 class=" float-button-light">Select 4</a></li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">FlipInX</button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="flipInX-items" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary effect-delay"
                                    aria-labelledby="flipInX-items" role="menu">
                                    <li class="flipInX animated"><a href="javascript:void(0)"
                                                                    class=" float-button-light">Select 1</a></li>
                                    <li class="flipInX animated"><a href="javascript:void(0)"
                                                                    class=" float-button-light">Select 2</a></li>
                                    <li class="flipInX animated"><a href="javascript:void(0)"
                                                                    class=" float-button-light">Select 3</a></li>
                                    <li class="flipInX animated"><a href="javascript:void(0)"
                                                                    class=" float-button-light">Select 4</a></li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">FlipInY</button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="flipInY-items" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary effect-delay"
                                    aria-labelledby="flipInY-items" role="menu">
                                    <li class="flipInY animated"><a href="javascript:void(0)"
                                                                    class=" float-button-light">Select 1</a></li>
                                    <li class="flipInY animated"><a href="javascript:void(0)"
                                                                    class=" float-button-light">Select 2</a></li>
                                    <li class="flipInY animated"><a href="javascript:void(0)"
                                                                    class=" float-button-light">Select 3</a></li>
                                    <li class="flipInY animated"><a href="javascript:void(0)"
                                                                    class=" float-button-light">Select 4</a></li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">LightSpeedIn
                                </button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="lightSpeedIn-items" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary effect-delay"
                                    aria-labelledby="lightSpeedIn-items" role="menu">
                                    <li class="lightSpeedIn animated"><a href="javascript:void(0)"
                                                                         class=" float-button-light">Select 1</a>
                                    </li>
                                    <li class="lightSpeedIn animated"><a href="javascript:void(0)"
                                                                         class=" float-button-light">Select 2</a>
                                    </li>
                                    <li class="lightSpeedIn animated"><a href="javascript:void(0)"
                                                                         class=" float-button-light">Select 3</a>
                                    </li>
                                    <li class="lightSpeedIn animated"><a href="javascript:void(0)"
                                                                         class=" float-button-light">Select 4</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">rollIn</button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="rollIn-items" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary effect-delay"
                                    aria-labelledby="rollIn-items" role="menu">
                                    <li class="rollIn animated"><a href="javascript:void(0)"
                                                                   class=" float-button-light">Select 1</a></li>
                                    <li class="rollIn animated"><a href="javascript:void(0)"
                                                                   class=" float-button-light">Select 2</a></li>
                                    <li class="rollIn animated"><a href="javascript:void(0)"
                                                                   class=" float-button-light">Select 3</a></li>
                                    <li class="rollIn animated"><a href="javascript:void(0)"
                                                                   class=" float-button-light">Select 4</a></li>
                                </ul>
                            </div>

                        </div>
                    </div>
                    <div class="col-lg-6 col-md-12">
                        <div class="section-header">
                            <h2>Bouncing entrances menu item effects</h2>
                            <p>Bouncing entrances different animations can be applied on menu item open effects.</p>
                        </div>
                        <div class="section-body">
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">BounceIn</button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="bouncein-items" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary effect-delay"
                                    aria-labelledby="bouncein-items" role="menu">
                                    <li class="bounceIn animated"><a href="javascript:void(0)"
                                                                     class=" float-button-light">Select 1</a></li>
                                    <li class="bounceIn animated"><a href="javascript:void(0)"
                                                                     class=" float-button-light">Select 2</a></li>
                                    <li class="bounceIn animated"><a href="javascript:void(0)"
                                                                     class=" float-button-light">Select 3</a></li>
                                    <li class="bounceIn animated"><a href="javascript:void(0)"
                                                                     class=" float-button-light">Select 4</a></li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">BounceInDown
                                </button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="bounceInDown-items" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary effect-delay"
                                    aria-labelledby="bounceInDown-items" role="menu">
                                    <li class="bounceInDown animated"><a href="javascript:void(0)"
                                                                         class=" float-button-light">Select 1</a>
                                    </li>
                                    <li class="bounceInDown animated"><a href="javascript:void(0)"
                                                                         class=" float-button-light">Select 2</a>
                                    </li>
                                    <li class="bounceInDown animated"><a href="javascript:void(0)"
                                                                         class=" float-button-light">Select 3</a>
                                    </li>
                                    <li class="bounceInDown animated"><a href="javascript:void(0)"
                                                                         class=" float-button-light">Select 4</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">BounceInLeft
                                </button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="bounceInLeft-items" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary effect-delay"
                                    aria-labelledby="bounceInLeft-items" role="menu">
                                    <li class="bounceInLeft animated"><a href="javascript:void(0)"
                                                                         class=" float-button-light">Select 1</a>
                                    </li>
                                    <li class="bounceInLeft animated"><a href="javascript:void(0)"
                                                                         class=" float-button-light">Select 2</a>
                                    </li>
                                    <li class="bounceInLeft animated"><a href="javascript:void(0)"
                                                                         class=" float-button-light">Select 3</a>
                                    </li>
                                    <li class="bounceInLeft animated"><a href="javascript:void(0)"
                                                                         class=" float-button-light">Select 4</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">BounceInRight
                                </button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="bounceInRight-items" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary effect-delay"
                                    aria-labelledby="bounceInRight-items" role="menu">
                                    <li class="bounceInRight animated"><a href="javascript:void(0)"
                                                                          class=" float-button-light">Select 1</a>
                                    </li>
                                    <li class="bounceInRight animated"><a href="javascript:void(0)"
                                                                          class=" float-button-light">Select 2</a>
                                    </li>
                                    <li class="bounceInRight animated"><a href="javascript:void(0)"
                                                                          class=" float-button-light">Select 3</a>
                                    </li>
                                    <li class="bounceInRight animated"><a href="javascript:void(0)"
                                                                          class=" float-button-light">Select 4</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">BounceInUp</button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="bounceInUp-items" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary effect-delay"
                                    aria-labelledby="bounceInUp-items" role="menu">
                                    <li class="bounceInUp animated"><a href="javascript:void(0)"
                                                                       class=" float-button-light">Select 1</a></li>
                                    <li class="bounceInUp animated"><a href="javascript:void(0)"
                                                                       class=" float-button-light">Select 2</a></li>
                                    <li class="bounceInUp animated"><a href="javascript:void(0)"
                                                                       class=" float-button-light">Select 3</a></li>
                                    <li class="bounceInUp animated"><a href="javascript:void(0)"
                                                                       class=" float-button-light">Select 4</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="clearfix"></div>

                    <div class="col-lg-6 col-md-12">
                        <div class="section-header">
                            <h2>Fading entrances menu item effects</h2>
                            <p>Fading entrances different animations can be applied on menu item open effects.</p>
                        </div>
                        <div class="section-body">
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">FadeIn</button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="fadeIn-items" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary effect-delay"
                                    aria-labelledby="fadeIn-items" role="menu">
                                    <li class="fadeIn animated"><a href="javascript:void(0)"
                                                                   class=" float-button-light">Select 1</a></li>
                                    <li class="fadeIn animated"><a href="javascript:void(0)"
                                                                   class=" float-button-light">Select 2</a></li>
                                    <li class="fadeIn animated"><a href="javascript:void(0)"
                                                                   class=" float-button-light">Select 3</a></li>
                                    <li class="fadeIn animated"><a href="javascript:void(0)"
                                                                   class=" float-button-light">Select 4</a></li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">FadeInDown</button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="fadeInDown-items" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary effect-delay"
                                    aria-labelledby="fadeInDown-items" role="menu">
                                    <li class="fadeInDown animated"><a href="javascript:void(0)"
                                                                       class=" float-button-light">Select 1</a></li>
                                    <li class="fadeInDown animated"><a href="javascript:void(0)"
                                                                       class=" float-button-light">Select 2</a></li>
                                    <li class="fadeInDown animated"><a href="javascript:void(0)"
                                                                       class=" float-button-light">Select 3</a></li>
                                    <li class="fadeInDown animated"><a href="javascript:void(0)"
                                                                       class=" float-button-light">Select 4</a></li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">FadeInDownBig
                                </button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="fadeInDownBig-items" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary effect-delay"
                                    aria-labelledby="fadeInDownBig-items" role="menu">
                                    <li class="fadeInDownBig animated"><a href="javascript:void(0)"
                                                                          class=" float-button-light">Select 1</a>
                                    </li>
                                    <li class="fadeInDownBig animated"><a href="javascript:void(0)"
                                                                          class=" float-button-light">Select 2</a>
                                    </li>
                                    <li class="fadeInDownBig animated"><a href="javascript:void(0)"
                                                                          class=" float-button-light">Select 3</a>
                                    </li>
                                    <li class="fadeInDownBig animated"><a href="javascript:void(0)"
                                                                          class=" float-button-light">Select 4</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">FadeInLeft</button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="fadeInLeft-items" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary effect-delay"
                                    aria-labelledby="fadeInLeft-items" role="menu">
                                    <li class="fadeInLeft animated"><a href="javascript:void(0)"
                                                                       class=" float-button-light">Select 1</a></li>
                                    <li class="fadeInLeft animated"><a href="javascript:void(0)"
                                                                       class=" float-button-light">Select 2</a></li>
                                    <li class="fadeInLeft animated"><a href="javascript:void(0)"
                                                                       class=" float-button-light">Select 3</a></li>
                                    <li class="fadeInLeft animated"><a href="javascript:void(0)"
                                                                       class=" float-button-light">Select 4</a></li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">FadeInLeftBig
                                </button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="fadeInLeftBig-items" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary effect-delay"
                                    aria-labelledby="fadeInLeftBig-items" role="menu">
                                    <li class="fadeInLeftBig animated"><a href="javascript:void(0)"
                                                                          class=" float-button-light">Select 1</a>
                                    </li>
                                    <li class="fadeInLeftBig animated"><a href="javascript:void(0)"
                                                                          class=" float-button-light">Select 2</a>
                                    </li>
                                    <li class="fadeInLeftBig animated"><a href="javascript:void(0)"
                                                                          class=" float-button-light">Select 3</a>
                                    </li>
                                    <li class="fadeInLeftBig animated"><a href="javascript:void(0)"
                                                                          class=" float-button-light">Select 4</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">FadeInRight
                                </button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="fadeInRight-items" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary effect-delay"
                                    aria-labelledby="fadeInRight-items" role="menu">
                                    <li class="fadeInRight animated"><a href="javascript:void(0)"
                                                                        class=" float-button-light">Select 1</a>
                                    </li>
                                    <li class="fadeInRight animated"><a href="javascript:void(0)"
                                                                        class=" float-button-light">Select 2</a>
                                    </li>
                                    <li class="fadeInRight animated"><a href="javascript:void(0)"
                                                                        class=" float-button-light">Select 3</a>
                                    </li>
                                    <li class="fadeInRight animated"><a href="javascript:void(0)"
                                                                        class=" float-button-light">Select 4</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">FadeInRightBig
                                </button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="fadeInRightBig-items" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary effect-delay"
                                    aria-labelledby="fadeInRightBig-items" role="menu">
                                    <li class="fadeInRightBig animated"><a href="javascript:void(0)"
                                                                           class=" float-button-light">Select 1</a>
                                    </li>
                                    <li class="fadeInRightBig animated"><a href="javascript:void(0)"
                                                                           class=" float-button-light">Select 2</a>
                                    </li>
                                    <li class="fadeInRightBig animated"><a href="javascript:void(0)"
                                                                           class=" float-button-light">Select 3</a>
                                    </li>
                                    <li class="fadeInRightBig animated"><a href="javascript:void(0)"
                                                                           class=" float-button-light">Select 4</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">FadeInUp</button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="fadeInUp-items" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary effect-delay"
                                    aria-labelledby="fadeInUp-items" role="menu">
                                    <li class="fadeInUp animated"><a href="javascript:void(0)"
                                                                     class=" float-button-light">Select 1</a></li>
                                    <li class="fadeInUp animated"><a href="javascript:void(0)"
                                                                     class=" float-button-light">Select 2</a></li>
                                    <li class="fadeInUp animated"><a href="javascript:void(0)"
                                                                     class=" float-button-light">Select 3</a></li>
                                    <li class="fadeInUp animated"><a href="javascript:void(0)"
                                                                     class=" float-button-light">Select 4</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-12">
                        <div class="section-header">
                            <h2>Rotating entrances menu item effects</h2>
                            <p>Rotating entrances different animations can be applied on menu item open effects.</p>
                        </div>
                        <div class="section-body">
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">RotateIn</button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="rotateIn-items" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary effect-delay"
                                    aria-labelledby="rotateIn-items" role="menu">
                                    <li class="rotateIn animated"><a href="javascript:void(0)"
                                                                     class=" float-button-light">Select 1</a></li>
                                    <li class="rotateIn animated"><a href="javascript:void(0)"
                                                                     class=" float-button-light">Select 2</a></li>
                                    <li class="rotateIn animated"><a href="javascript:void(0)"
                                                                     class=" float-button-light">Select 3</a></li>
                                    <li class="rotateIn animated"><a href="javascript:void(0)"
                                                                     class=" float-button-light">Select 4</a></li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">RotateInDownLeft
                                </button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="rotateInDownLeft-items" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary effect-delay"
                                    aria-labelledby="rotateInDownLeft-items" role="menu">
                                    <li class="rotateInDownLeft animated"><a href="javascript:void(0)"
                                                                             class=" float-button-light">Option 1</a>
                                    </li>
                                    <li class="rotateInDownLeft animated"><a href="javascript:void(0)"
                                                                             class=" float-button-light">Option 2</a>
                                    </li>
                                    <li class="rotateInDownLeft animated"><a href="javascript:void(0)"
                                                                             class=" float-button-light">Option 3</a>
                                    </li>
                                    <li class="rotateInDownLeft animated"><a href="javascript:void(0)"
                                                                             class=" float-button-light">Option 4</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">RotateInDownRight
                                </button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="rotateInDownRight-items" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary effect-delay"
                                    aria-labelledby="rotateInDownRight-items" role="menu">
                                    <li class="rotateInDownRight animated"><a href="javascript:void(0)"
                                                                              class=" float-button-light">Option 1</a>
                                    </li>
                                    <li class="rotateInDownRight animated"><a href="javascript:void(0)"
                                                                              class=" float-button-light">Option 2</a>
                                    </li>
                                    <li class="rotateInDownRight animated"><a href="javascript:void(0)"
                                                                              class=" float-button-light">Option 3</a>
                                    </li>
                                    <li class="rotateInDownRight animated"><a href="javascript:void(0)"
                                                                              class=" float-button-light">Option 4</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">RotateInUpLeft
                                </button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="rotateInUpLeft-items" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary effect-delay"
                                    aria-labelledby="rotateInUpLeft-items" role="menu">
                                    <li class="rotateInUpLeft animated"><a href="javascript:void(0)"
                                                                           class=" float-button-light">Select 1</a>
                                    </li>
                                    <li class="rotateInUpLeft animated"><a href="javascript:void(0)"
                                                                           class=" float-button-light">Select 2</a>
                                    </li>
                                    <li class="rotateInUpLeft animated"><a href="javascript:void(0)"
                                                                           class=" float-button-light">Select 3</a>
                                    </li>
                                    <li class="rotateInUpLeft animated"><a href="javascript:void(0)"
                                                                           class=" float-button-light">Select 4</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">RotateInUpRight
                                </button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="rotateInUpRight-items" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary effect-delay"
                                    aria-labelledby="rotateInUpRight-items" role="menu">
                                    <li class="rotateInUpRight animated"><a href="javascript:void(0)"
                                                                            class=" float-button-light">Select 1</a>
                                    </li>
                                    <li class="rotateInUpRight animated"><a href="javascript:void(0)"
                                                                            class=" float-button-light">Select 2</a>
                                    </li>
                                    <li class="rotateInUpRight animated"><a href="javascript:void(0)"
                                                                            class=" float-button-light">Select 3</a>
                                    </li>
                                    <li class="rotateInUpRight animated"><a href="javascript:void(0)"
                                                                            class=" float-button-light">Select 4</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="clearfix"></div>

                    <div class="col-lg-6 col-md-12">
                        <div class="section-header">
                            <h2>Sliding entrances menu item effects</h2>
                            <p>Sliding entrances different animations can be applied on menu item open effects.</p>
                        </div>
                        <div class="section-body">
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">SlideInUp</button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="slideInUp-items" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary effect-delay"
                                    aria-labelledby="slideInUp-items" role="menu">
                                    <li class="slideInUp animated"><a href="javascript:void(0)"
                                                                      class=" float-button-light">Select 1</a></li>
                                    <li class="slideInUp animated"><a href="javascript:void(0)"
                                                                      class=" float-button-light">Select 2</a></li>
                                    <li class="slideInUp animated"><a href="javascript:void(0)"
                                                                      class=" float-button-light">Select 3</a></li>
                                    <li class="slideInUp animated"><a href="javascript:void(0)"
                                                                      class=" float-button-light">Select 4</a></li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">SlideInDown
                                </button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="slideInDown-items" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary effect-delay"
                                    aria-labelledby="slideInDown-items" role="menu">
                                    <li class="slideInDown animated"><a href="javascript:void(0)"
                                                                        class=" float-button-light">Select 1</a>
                                    </li>
                                    <li class="slideInDown animated"><a href="javascript:void(0)"
                                                                        class=" float-button-light">Select 2</a>
                                    </li>
                                    <li class="slideInDown animated"><a href="javascript:void(0)"
                                                                        class=" float-button-light">Select 3</a>
                                    </li>
                                    <li class="slideInDown animated"><a href="javascript:void(0)"
                                                                        class=" float-button-light">Select 4</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">SlideInLeft
                                </button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="slideInLeft-items" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary effect-delay"
                                    aria-labelledby="slideInLeft-items" role="menu">
                                    <li class="slideInLeft animated"><a href="javascript:void(0)"
                                                                        class=" float-button-light">Select 1</a>
                                    </li>
                                    <li class="slideInLeft animated"><a href="javascript:void(0)"
                                                                        class=" float-button-light">Select 2</a>
                                    </li>
                                    <li class="slideInLeft animated"><a href="javascript:void(0)"
                                                                        class=" float-button-light">Select 3</a>
                                    </li>
                                    <li class="slideInLeft animated"><a href="javascript:void(0)"
                                                                        class=" float-button-light">Select 4</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">SlideInRight
                                </button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="slideInRight-items" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary effect-delay"
                                    aria-labelledby="slideInRight-items" role="menu">
                                    <li class="slideInRight animated"><a href="javascript:void(0)"
                                                                         class=" float-button-light">Select 1</a>
                                    </li>
                                    <li class="slideInRight animated"><a href="javascript:void(0)"
                                                                         class=" float-button-light">Select 2</a>
                                    </li>
                                    <li class="slideInRight animated"><a href="javascript:void(0)"
                                                                         class=" float-button-light">Select 3</a>
                                    </li>
                                    <li class="slideInRight animated"><a href="javascript:void(0)"
                                                                         class=" float-button-light">Select 4</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-12">
                        <div class="section-header">
                            <h2>Zoom entrances menu item effects</h2>
                            <p>Zoom entrances different animations can be applied on menu item open effects.</p>
                        </div>
                        <div class="section-body">
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">ZoomIn</button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="zoomIn-items" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary effect-delay"
                                    aria-labelledby="zoomIn-items" role="menu">
                                    <li class="zoomIn animated"><a href="javascript:void(0)"
                                                                   class=" float-button-light">Select 1</a></li>
                                    <li class="zoomIn animated"><a href="javascript:void(0)"
                                                                   class=" float-button-light">Select 2</a></li>
                                    <li class="zoomIn animated"><a href="javascript:void(0)"
                                                                   class=" float-button-light">Select 3</a></li>
                                    <li class="zoomIn animated"><a href="javascript:void(0)"
                                                                   class=" float-button-light">Select 4</a></li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">ZoomInDown</button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="zoomInDown-items" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary effect-delay"
                                    aria-labelledby="zoomInDown-items" role="menu">
                                    <li class="zoomInDown animated"><a href="javascript:void(0)"
                                                                       class=" float-button-light">Select 1</a></li>
                                    <li class="zoomInDown animated"><a href="javascript:void(0)"
                                                                       class=" float-button-light">Select 2</a></li>
                                    <li class="zoomInDown animated"><a href="javascript:void(0)"
                                                                       class=" float-button-light">Select 3</a></li>
                                    <li class="zoomInDown animated"><a href="javascript:void(0)"
                                                                       class=" float-button-light">Select 4</a></li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">ZoomInLeft</button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="zoomInLeft-items" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary effect-delay"
                                    aria-labelledby="zoomInLeft-items" role="menu">
                                    <li class="zoomInLeft animated"><a href="javascript:void(0)"
                                                                       class=" float-button-light">Select 1</a></li>
                                    <li class="zoomInLeft animated"><a href="javascript:void(0)"
                                                                       class=" float-button-light">Select 2</a></li>
                                    <li class="zoomInLeft animated"><a href="javascript:void(0)"
                                                                       class=" float-button-light">Select 3</a></li>
                                    <li class="zoomInLeft animated"><a href="javascript:void(0)"
                                                                       class=" float-button-light">Select 4</a></li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">ZoomInRight
                                </button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="zoomInRight-items" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary effect-delay"
                                    aria-labelledby="zoomInRight-items" role="menu">
                                    <li class="zoomInRight animated"><a href="javascript:void(0)"
                                                                        class=" float-button-light">Select 1</a>
                                    </li>
                                    <li class="zoomInRight animated"><a href="javascript:void(0)"
                                                                        class=" float-button-light">Select 2</a>
                                    </li>
                                    <li class="zoomInRight animated"><a href="javascript:void(0)"
                                                                        class=" float-button-light">Select 3</a>
                                    </li>
                                    <li class="zoomInRight animated"><a href="javascript:void(0)"
                                                                        class=" float-button-light">Select 4</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">ZoomInUp</button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="zoomInUp-items" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary effect-delay"
                                    aria-labelledby="zoomInUp-items" role="menu">
                                    <li class="zoomInUp animated"><a href="javascript:void(0)"
                                                                     class=" float-button-light">Select 1</a></li>
                                    <li class="zoomInUp animated"><a href="javascript:void(0)"
                                                                     class=" float-button-light">Select 2</a></li>
                                    <li class="zoomInUp animated"><a href="javascript:void(0)"
                                                                     class=" float-button-light">Select 3</a></li>
                                    <li class="zoomInUp animated"><a href="javascript:void(0)"
                                                                     class=" float-button-light">Select 4</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="clearfix"></div>

                    <div class="col-lg-4 col-md-4">
                        <div class="section-header">
                            <h2>Icon dropdown</h2>
                            <p>You can also use icon dropdown menu.</p>
                        </div>
                        <div class="section-body">
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">Icon dropdown</button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="icon-dropdown" data-toggle="dropdown" aria-expanded="true">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary show-dropdown dropdown-icon"
                                    aria-labelledby="icon-dropdown"
                                    role="menu">
                                    <li><a href="javascript:void(0)" class=" float-button-light">User <i
                                                    class="icon_profile"></i></a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Comment <i
                                                    class="icon_comment"></i></a>
                                    </li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Setting <i
                                                    class="icon_cog"></i></a></li>
                                    <li></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Delete <i
                                                    class="icon_trash_alt"></i></a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-4 col-md-4">
                        <div class="section-header">
                            <h2>Badges dropdown</h2>
                            <p>You can also use badges dropdown menu.</p>
                        </div>
                        <div class="section-body">
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">Badges dropdown
                                </button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="badges-dropdown" data-toggle="dropdown" aria-expanded="true">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary show-dropdown dropdown-icon"
                                    aria-labelledby="badges-dropdown"
                                    role="menu">
                                    <li><a href="javascript:void(0)" class=" float-button-light">User <span
                                                    class="badge badge-primary">1</span></a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Comment <span
                                                    class="badge badge-success">2</span></a>
                                    </li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Setting <span
                                                    class="badge badge-info">3</span></a></li>
                                    <li></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Delete <span
                                                    class="badge badge-danger">4</span></a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-4 col-md-4">
                        <div class="section-header">
                            <h2>Label dropdown</h2>
                            <p>You can also use label dropdown menu.</p>
                        </div>
                        <div class="section-body">
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary float-button-light">Label dropdown</button>
                                <button type="button" class="btn btn-primary dropdown-toggle float-button-light"
                                        id="label-dropdown" data-toggle="dropdown" aria-expanded="true">
                                    <span class="caret"></span>
                                    <span class="sr-only"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-primary show-dropdown dropdown-icon"
                                    aria-labelledby="label-dropdown"
                                    role="menu">
                                    <li><a href="javascript:void(0)" class=" float-button-light">User <span
                                                    class="label label-primary">label</span></a></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Comment <span
                                                    class="label label-success">label</span></a>
                                    </li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Setting <span
                                                    class="label label-info">label</span></a></li>
                                    <li></li>
                                    <li><a href="javascript:void(0)" class=" float-button-light">Delete <span
                                                    class="label label-danger">label</span></a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>

    </div>
    <!-- End Contain Section -->    <!-- Start Footer Section -->    <footer class="footer">        © 2018 All rights reserved. Template designed by <a class="text-primary" href="http://www.bootstrapmb.com/">Prince</a>    </footer>    <!-- End Footer Section -->
</div>
</div>

<!-- Start core js -->
<script src="../../assets/global/plugins/jquery/dist/jquery.min.js"></script>
<script src="../../assets/global/plugins/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="../../assets/global/plugins/Waves/dist/waves.min.js"></script>
<script src="../../assets/global/plugins/screenfull.js/dist/screenfull.min.js"></script>
<script src="../../assets/global/plugins/jquery-slimscroll/jquery.slimscroll.js"></script>
<!-- Start core javascript -->

<!-- Start global js -->
<script src="../../assets/global/js/left-icon-menu.min.js"></script>
<!-- End global js -->


<!-- Start page js -->

<!-- End page js -->

</body>
</html>